
import { Text, View } from "@tarojs/components";
import Taro, { useDidShow, useReachBottom, useRouter } from "@tarojs/taro";

import ByRow from "@/components/ui/ByRow";
import Card from "@/components/common/Card";
import ByCell from "@/components/ui/ByCell";
import Page from "@/components/common/Page";
import ByText from "@/components/ui/ByText";
import ByButton from "@/components/ui/ByButton";
import ListView from "@/components/app/ListView";
import UserItem from "@/components/app/UserItem";

import useList from "@/hooks/useList";
import ApiFinance from "@/api/finance";
import useEnum from "@/hooks/useEnum";
import ByTag from "@/components/ui/ByTag";

const EnumPenaltyType = {
  0: "施工人员",
  1: "供应商",
  2: "工人",
};

const EnumPenaltyKey = {
  0: "tagetUserName",
  1: "supplyName",
  2: "workerName",
};

export const enumStatusOptions = [
  { label: "已保存", value: 0, color: "info" },
  { label: "待审核", value: 1, color: "warning" },
  { label: "已通过", value: 2, color: "primary" },
  { label: "已驳回", value: 3, color: "error" },
];

export default () => {
  const { params } = useRouter();
  const intentCustomerId = Number(params.intentCustomerId);

  const { loading, list, nextPage, resetToFirst } = useList<any>(ApiFinance.fineList, {
    manual: true,
  });

  useDidShow(() => resetToFirst({ intentCustomerId }))
  useReachBottom(() => nextPage());


  const { getOption } = useEnum(enumStatusOptions)

  return (
    <>
      <Page
        footerSticky
        slotFooter={
          <ByButton
            className="w-2/3"
            size="large"
            to={`apply?intentCustomerId=${intentCustomerId}`}
          >
            新增罚款
          </ByButton>
        }
      >
        <ListView loading={loading} isEmpty={list.length === 0}>
          {list.map((item) => (
            <Card
              className="m-3"
              key={item.penaltyBillId}
              onClick={() => Taro.navigateTo({ url: `/packageProject/pages/approve/detail?wl_id=${item.workFlowInstanceId}&intentCustomerId=${intentCustomerId}` })}
            >

              <ByRow align="center" content="between">
                <ByText size="lg">
                  {EnumPenaltyType[item.penaltyType]}罚款
                </ByText>

                <ByTag type={getOption(item.status, 'color')}>{getOption(item.status, 'label')}</ByTag>
              </ByRow>

              <View className="text-sm mb-1 mt-2">
                {item[EnumPenaltyKey[item.penaltyType]]}
              </View>
              <ByCell className="text-sm" size="small" label="罚款金额：">
                ¥{item.penaltyAmount}
              </ByCell>
              <ByCell className="text-sm" size="small" label="罚款原因：">
                {item.reason}
              </ByCell>

              <ByRow content="between" className="mt-2" align="center">
                <UserItem name={item.createUserName} />
                <Text className="text-third text-sm">{item.createDate}</Text>
              </ByRow>
            </Card>
          ))}
        </ListView>
      </Page>
    </>
  );
};
